<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>QSKJ_LOCAL</title>
    <script src="/Public/Build/Cesium/Cesium.js"></script>
    <script src="/Public/js/jquery-3.7.1.min.js"></script>
    <script src="/Public/js/utilsForCesium.js"></script>
    <link rel="stylesheet" href="/Public/Build/Cesium/Widgets/widgets.css">
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MjczNDgzMy1hYzE1LTRjNWYtODZhMS01MjZkNWRiMDc2MmUiLCJpZCI6ODIxMzAsImlhdCI6MTY0NDU0ODc0M30.LpGXXWsbQXucV5MTeC2g8BCAQWiZp612gosWcK-7ocE';

        const viewer = new Cesium.Viewer('cesiumContainer', {
            terrain: Cesium.Terrain.fromWorldTerrain(),
        });


        $.get("/Public/data/lake2.json", {}, function (data) {
            data.features.forEach(feature => {
                const pls = feature.geometry.rings[0]

                var pts = []
                pls.forEach(pl => {
                    pts.push(pl[0])
                    pts.push(pl[1])
                })

                const polygon = new Cesium.PolygonGeometry({
                    polygonHierarchy: new Cesium.PolygonHierarchy(
                        Cesium.Cartesian3.fromDegreesArray(pts)
                    ),
                    height: 2100
                });
                // const g_polygon = Cesium.PolygonGeometry.createGeometry(polygon);
                const geometry1 = Cesium.PolygonGeometry.createGeometry(polygon);

                const myPrimitive1 = new Cesium.Primitive({
                    geometryInstances: new Cesium.GeometryInstance({
                        geometry: geometry1
                    }),
                    appearance: new Cesium.MaterialAppearance({
                        material: new Cesium.Material({
                            fabric: {
                                materials: {
                                    diffuseMaterial: {
                                        type: "DiffuseMap",
                                        uniforms: {
                                            image: "/Public/imgs/bumpmap.png",
                                        },
                                    },
                                    bumpMaterial: {
                                        type: "BumpMap",
                                        uniforms: {
                                            image: "/Public/imgs/bumpmap.png",
                                            strength: 0.8,
                                        },
                                    },
                                },
                                components: {
                                    diffuse: "diffuseMaterial.diffuse",
                                    specular: 0.01,
                                    normal: "bumpMaterial.normal",
                                },
                            },
                        }),
                        faceForward: true
                    })
                })

                viewer.scene.primitives.add(myPrimitive1);
            })

            
            viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(102.746, 30.703, 20000),
                duration: 0
            })

        })

       
    </script>
    </div>
</body>

</html>